<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>具名插槽</title>
    <script src="../vue.global.js"></script>
</head>
<style>
    #first {
        background-color: blue;
        width: 300px;
        height:150px;
    }

    #second {
        background-color: aquamarine;
        width: 300px;
        height:150px;
    }
</style>

<body>
    <div id="app"></div>
    <script>
        const app = Vue.createApp({
            data() {
                return {}
            },
            methods: {},
            /**
             *  v-slot:header 可以简写为 #header
             */
            template: `
          <layout>
              <template v-slot:header>
                <div id="first">header</div>
              </template>
              <template v-slot:footer>
                <div id="second">footer</div>
              </template>
          </layout>
        `
        });
        app.component('layout', {
            template: `
            <div>
                <slot name="header"></slot>
                <div id="mid">content</div>
                <slot name="footer"></slot>
            </div>
        `
        })
        const vm = app.mount("#app");
    </script>
</body>

</html>